Button Appearance

Description

Properties for defining how the button is rendered.

Sub-theme

A sub-theme is a variation on the base style for a control. Click the button to open the sub-theme picker. A list of available sub-themes for the control will be shown. All controls have a 'base' sub-theme if the UX Component uses a Version 4 style sheet.

You can create your own sub-themes using the Style sub-theme and CSS 'tweaks' property.

Button layout

The layout of the button. The layout can be a combination of text and an image, text only, or image only:

• Text only
• Image only
• Text followed by image
• Image followed by text
• Image above text
• Text above image
• Text left & image right
• Image left & text right

Has dropdown icon

If checked, adds a small dropdown arrow to the button. The dropdown icon is often used to indicate clicking the button will show a dropdown window.

Display as split button

If checked, the button and the dropdown icon are separated into two logical buttons. If you use this option, you should define your event handler in the 'onClick' rather than the 'click' event. You will then be able to refer to arguments[1] in your code to see if the user clicked on the dropdown icon or the button, arguments[1] will be set to either 'normal' or 'split'.

This property is only available if Has dropdown icon is enabled.

Button class

One or more classes applied to the button. Use <None> for no class. Use <Default> or blank for the default class.

Button class hover

One or more classes applied to the button when the mouse is hovering over the button. You can enter <Default> or leave blank to use the default class name. Specify <None> for no class. If you specify your own class name here you can prefix it with '+' to use the specified class in addition to the default class. E.g. +myHoverclass.

Button class pressed

One or more classes applied to the button when the user clicks on the button. You can enter <Default> or leave blank to use the default class name. Specify <None> for no class. If you specify your own class name here you can prefix it with '+' to use the specified class in addition to the default class. E.g. +myPressedclass.

Button class disabled

One or more classes applied to the button when the button is disabled. You can enter <Default> or leave blank to use the default class name. Specify <None> for no class. If you specify your own class name here you can prefix it with '+' to use the specified class in addition to the default class. E.g. +myDisabledclass.

Button inline style

CSS styles applied to the button using the style attribute.

Button text class

One or more css classes applied to the button text. You can enter <Default>, or leave blank, to use the default class name. Specifying <None> will result in no classes applied to the button.

Button text inline style

CSS styles applied to the button's text using the style attribute.

Image name

The image shown on the button if the button's layout is set to display an image.

Hover image name

The image shown on the button when the user hovers the mouse over the button.

Pressed image name

The image shown on the button when the user clicks the button.

Disabled image name

The image shown on the button when the button is disabled.

Image class

One or more css classes applied to the button's image. You can enter <Default>, or leave blank, to use the default class name. Specifying <None> will result in no classes applied to the image.

Image inline style

CSS styles applied to the button's image using the style attribute.

Show badge

If enabled, adds a notification badge to the button.

Badge settings

The Badge settings control the display of the button's badge. These settings are only available if Show badge is enabled.

• Class name

  One or more classes to assign the badge. If the class sets the font-size, color, background, background-color, padding, border-radius, border, line-height, min-width, width, box-sizing, position, top, bottom, left, right, or transform attributes, you may need to use the !important directive. This is because the default styling for the badge is inlined in the badge's generated HTML. Because these properties are set inline, they take precedence over the attributes defined in the class. The !important CSS directive ensures that your class settings will be used. For example:

  .badge {
      background: blue !important;
      border-radius: 0 !important;
      border: blue !important;
  }

• Style

  Optional in-line style attributes to assign the badge.

• Badge location - vertical

  The vertical alignment of the badge. This can be top or bottom.

• Badge location - horizontal

  The horizontal alignment of the badge. This can be left or right.

• Badge location - relative to edge

  If checked, the badge will be displayed outside the button, relative to the location of the button's edge.

• Offset

  The distance in pixels between the edge of the button and the badge. The offset is applied relative to the horizontal and vertical edge.

  This property is only available if Badge location - relative to edge is unchecked.

• Badge text

  The text to show on the badge.

  You can dynamically change the badge text at runtime using JavaScript:

  var button = {dialog.object}.getControl("MY_BUTTON_ID");
  if (button) {
      button.setBadge(34);
  }

  See setBadge() for more details.

• Maximum number

  If the badge value is a number, the maximum value to display before adding a "+" symbol after the number to indicate that the value is greater than the Maximum number.

Videos

How to Add a Badge to a Button

A common UI pattern in applications is to add a badge to buttons to convey some information. For example, you might have a button that shows orders and a badge shown over the button would show how many orders have been received. You can add badges to standalone buttons and also to buttons that are shown in a Control Bar.

In this video, we show how to add a badge to a button and how to dynamically set the badge value.

• Watch Video

Download Component